<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能报价单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#ff2442', // 小红书主色调
                        secondary: '#ff7a90', // 小红书辅助色
                        light: '#fff5f7', // 浅色背景
                        dark: '#333333', // 深色文字
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-bookmark text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">功能报价单</h1>
            </div> 
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6 max-w-4xl">
        <!-- 介绍卡片 -->
        <div class="bg-white rounded-2xl shadow-md p-6 mb-8">
            <div class="flex items-start mb-4">
                <img src="https://picsum.photos/60/60" alt="项目头像" class="w-12 h-12 rounded-full object-cover mr-4">
                <div>
                    <h2 class="font-bold text-lg">产品功能清单及报价</h2>
                    <p class="text-gray-500 text-sm">专业开发团队 · 量身定制</p>
                </div>
            </div>
            <p class="text-gray-600 mb-4">
                以下是移动端和PC端功能清单及报价详情，包含各项主功能及子功能说明，供参考。
            </p>
            <div class="flex flex-wrap gap-2">
                <span class="bg-light text-primary text-xs px-3 py-1 rounded-full">功能清单</span>
                <span class="bg-light text-primary text-xs px-3 py-1 rounded-full">开发报价</span>
                <span class="bg-light text-primary text-xs px-3 py-1 rounded-full">移动端</span>
                <span class="bg-light text-primary text-xs px-3 py-1 rounded-full">PC端</span>
            </div>
        </div>

        <!-- 移动端功能卡片 -->
        <div class="bg-white rounded-2xl shadow-md p-6 mb-8 card-hover">
            <div class="flex items-center mb-6">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-mobile text-primary text-xl"></i>
                </div>
                <h2 class="text-xl font-bold">移动端功能</h2>
            </div>
            
            <!-- 功能表格 -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-100">
                            <th class="text-left py-3 px-2 font-semibold text-gray-600">功能名称</th>
                            <th class="text-left py-3 px-2 font-semibold text-gray-600">子功能</th>
                            <th class="text-right py-3 px-2 font-semibold text-gray-600">报价(元)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 个人中心 -->
                        <tr class="border-b border-gray-50">
                            <td class="py-4 px-2 font-medium">1、个人中心</td>
                            <td class="py-4 px-2 text-gray-600">
                                <ul class="list-disc list-inside text-sm space-y-1">
                                    <li>登录</li>
                                    <li>发布创意(文字及视频和图片)</li>
                                    <li>私人素材浏览</li>
                                    <li>收藏</li>
                                    <li>客服</li>
                                </ul>
                            </td>
                            <td class="py-4 px-2 text-right font-medium">¥1,000</td>
                        </tr>
                        
                        <!-- 资料库 -->
                        <tr class="border-b border-gray-50">
                            <td class="py-4 px-2 font-medium">2、资料库</td>
                            <td class="py-4 px-2 text-gray-600">
                                <ul class="list-disc list-inside text-sm space-y-1">
                                    <li>分类浏览</li>
                                    <li>瀑布流素材预览</li>
                                    <li>搜索</li>
                                </ul>
                            </td>
                            <td class="py-4 px-2 text-right font-medium">¥200</td>
                        </tr>
                        
                        <!-- 首页信息流 -->
                        <tr>
                            <td class="py-4 px-2 font-medium">3、首页信息流</td>
                            <td class="py-4 px-2 text-gray-600">
                                <ul class="list-disc list-inside text-sm space-y-1">
                                    <li>瀑布流列表</li>
                                    <li>搜索</li>
                                    <li>复制文案</li>
                                    <li>一键保存素材</li>
                                    <li>分享</li>
                                    <li>点赞</li>
                                    <li>收藏</li>
                                    <li>提示</li>
                                </ul>
                            </td>
                            <td class="py-4 px-2 text-right font-medium">¥1,000</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 移动端总计 -->
            <div class="mt-6 pt-4 border-t border-gray-100 flex justify-between items-center">
                <span class="font-bold text-lg">移动端总计</span>
                <span class="font-bold text-xl text-primary">¥2,200</span>
            </div>
        </div>

        <!-- PC端功能卡片 -->
        <div class="bg-white rounded-2xl shadow-md p-6 mb-8 card-hover">
            <div class="flex items-center mb-6">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-desktop text-primary text-xl"></i>
                </div>
                <h2 class="text-xl font-bold">PC端功能</h2>
            </div>
            
            <!-- 功能表格 -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-100">
                            <th class="text-left py-3 px-2 font-semibold text-gray-600">功能名称</th>
                            <th class="text-left py-3 px-2 font-semibold text-gray-600">子功能</th>
                            <th class="text-right py-3 px-2 font-semibold text-gray-600">报价(元)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 用户管理 -->
                        <tr class="border-b border-gray-50">
                            <td class="py-4 px-2 font-medium">1、用户管理</td>
                            <td class="py-4 px-2 text-gray-600">
                                <p class="text-sm">用户信息管理、权限控制、数据统计等</p>
                            </td>
                            <td class="py-4 px-2 text-right font-medium">¥200</td>
                        </tr>
                        
                        <!-- 素材管理 -->
                        <tr class="border-b border-gray-50">
                            <td class="py-4 px-2 font-medium">2、素材管理</td>
                            <td class="py-4 px-2 text-gray-600">
                                <p class="text-sm">素材上传、分类、审核、存储管理等</p>
                            </td>
                            <td class="py-4 px-2 text-right font-medium">¥1,000</td>
                        </tr>
                        
                        <!-- 字典管理 -->
                        <tr>
                            <td class="py-4 px-2 font-medium">3、字典管理</td>
                            <td class="py-4 px-2 text-gray-600">
                                <p class="text-sm">系统参数配置、数据字典维护等</p>
                            </td>
                            <td class="py-4 px-2 text-right font-medium">¥200</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- PC端总计 -->
            <div class="mt-6 pt-4 border-t border-gray-100 flex justify-between items-center">
                <span class="font-bold text-lg">PC端总计</span>
                <span class="font-bold text-xl text-primary">¥1,400</span>
            </div>
        </div>

        <!-- 总报价卡片 -->
        <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl shadow-md p-6 text-white mb-8">
            <h2 class="text-xl font-bold mb-4">项目总报价</h2>
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-white/80 text-sm">移动端 + PC端 全套功能</p>
                    <p class="text-white/80 text-sm">包含60天免费维护期</p>
                </div>
                <div class="text-center md:text-right">
                    <p class="text-white/90 text-sm">总计金额</p>
                    <p class="text-3xl font-bold mt-1">¥3,600</p>
                    <p class="text-white/80 text-sm mt-1">60%-30%-30%</p>
                </div>
            </div>
        </div>

        <!-- 联系卡片 -->
        <div class="bg-white rounded-2xl shadow-md p-6 mb-8 text-center">
            <h3 class="font-bold text-lg mb-4">需要详细方案或调整报价？</h3>
            <button class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-full font-medium transition-colors w-full md:w-auto">
                联系我们
            </button>
            <p class="text-gray-500 text-sm mt-4">工作时间: 周一至周五 9:00-18:00</p>
        </div>
    </main>

    <!-- 底部导航 -->
    <footer class="bg-white border-t border-gray-100 py-4">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2025 功能报价单 | 专业开发服务</p>
        </div>
    </footer>

    <!-- 交互脚本 -->
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', () => {
            const cards = document.querySelectorAll('.card-hover');
            
            // 为卡片添加渐入动画
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 100 + index * 150);
            });
            
            // 为收藏按钮添加交互
            const likeBtn = document.querySelector('.fa-heart-o').parentElement;
            likeBtn.addEventListener('click', () => {
                const icon = likeBtn.querySelector('i');
                if (icon.classList.contains('fa-heart-o')) {
                    icon.classList.remove('fa-heart-o');
                    icon.classList.add('fa-heart');
                    icon.classList.add('text-primary');
                } else {
                    icon.classList.remove('fa-heart');
                    icon.classList.remove('text-primary');
                    icon.classList.add('fa-heart-o');
                }
            });
        });
    </script>
</body>
</html>
